﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>代课</title>
    <link rel="stylesheet" type="text/css" href="/MobWeb/css/bootstrap3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="/MobWeb/css/elem/index.css">
    <link href="/MobWeb/js/layer/need/layer.css" rel="stylesheet" />
    <script src="/MobWeb/js/layer/layer.m.js"></script>
    <style>
        .el-input input {
            height: 32px !important;
            border: 0PX !important;
        }

        .el-select-dropdown__item {
            height: auto !important;
            /*border-bottom: 1px solid #eef1f7;*/
        }
    </style>
</head>

<body ontouchstart>

    <div id="app">
        <div style="text-align:center;text-align: center;padding: 20px;font-size: 20px;">
            代课申请
        </div>
        <el-row :gutter="20" style="height:60px;padding:20px;">
            <el-col :span="12">
                <div class="input-group" style="margin-bottom:10PX;">
                    <div class="input-group-btn">
                        <button type="button" style="height: 34px;min-width:80PX" class="btn btn-primary  dropdown-toggle">代课学期</button>
                    </div>
                    <el-input placeholder="调课学期" :disabled="true" size="mini" v-model="xq" class="form-control filter" style="height: 34px;padding:0px">
                    </el-input>

                </div>
            </el-col>
            <el-col :span="12">
                <div class="input-group" style="margin-bottom:10PX;">
                    <div class="input-group-btn">
                        <button type="button" style="height: 34px;min-width:80PX" class="btn btn-primary  dropdown-toggle">上课周次</button>
                    </div>
                    <el-select placeholder="上课周次" size="mini" v-model="skzc" class="form-control filter" style="height: 34px;padding:0px">
                        <el-option v-for="item in skzcs" :key="item.SKZ" :label="'第'+item.SKZ+'周('+item.SRQ+'-'+item.ERQ+')'" :value="item.SKZ"></el-option>

                    </el-select>

                </div>
            </el-col>
            <el-col :span="12">
                <div class="input-group" style="margin-bottom:10PX;">
                    <div class="input-group-btn">
                        <button type="button" style="height: 34px;min-width:80PX" class="btn btn-primary  dropdown-toggle"> 代课课程</button>
                    </div>

                    <el-select v-model="skkc" size="mini" placeholder="请选择代课课程" class="form-control filter skkc" style="height: 34px;padding:0px;">
                        <el-option v-for="item in tkkcs"
                                   :key="item.id"
                                   :label="item.kcmc+',星期'+ item.zc+'第'+ item.jc1 +'~'+ item.jc2 +'节'"
                                   :value="item.id">
                            <div style="overflow:auto">
                                <span style="float: left">{{ item.kcmc }}</span>
                                <span style="float: right">
                                    <span class="label label-info">星期{{ item.zc }},第{{ item.jc1 }}~{{ item.jc2 }}节</span>
                                </span>

                            </div>
                            <div style="overflow:auto">
                                <span style="float: left">{{item.jse}}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.hbbj }}</span>
                            </div>
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="input-group" style="margin-bottom:10PX;">
                    <div class="input-group-btn">
                        <button type="button" style="height: 34px;min-width:80PX" class="btn btn-primary  dropdown-toggle">代课老师</button>
                    </div>
                    <base-js :pzoption="js"></base-js>

                </div>
            </el-col>


            <el-col :span="24">
                <el-input type="textarea"
                          placeholder="请输入代课原因"
                          v-model="dkyy"
                          maxlength="100"
                          show-word-limit>
            </el-col>
            <el-col :span="24" style="margin-top:20px">
                <el-button type="primary" @click="onSubmit()" style="width:98%" :loading="btload">申请代课</el-button>

            </el-col>
        </el-row>


    </div>
    <script src="/MobWeb/js/jquery-1.11.2.min.js"></script>
    <script src="/MobWeb/js/vue.js"></script>
    <script src="/ViewV5/JS/httpVueLoader.js"></script>
    <script src="/MobWeb/js/lodash.min.js"></script>
    <script src="/MobWeb/css/elem/index.js"></script>
    <script src="/ViewV5/JS/SZHLCommon.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                xq: "",
                username: "",
                js: { value: "" },
                btload: false,
                isbc: false,
                skzc: "",//上课周次
                skkc: "",//上课课程
                tkzc: "",//调课周次
                tkxq: "1",
                dqz: "1",
                skzcs: [],
                dkyy:"",
                currentRow: null,
                activeName: 'first',
                tkkcs: [],//可调课程
                tkjses: [],//可调教室
                tklbs: [],
                tkjcs: [], //调课星期及节次
                form: {
                    glz: "",
                    sjsm: ""

                }

            },
            components: {
                'base-js': httpVueLoader('/ViewV5/AppPage/QJJW/component/conjs.vue')
            },
            methods: {
                cancalReadOnly(onOff) {
                    this.$nextTick(() => {
                        if (!onOff) {
                            //const { select } = this.$refs;
                            //const input = select.$el.querySelector('.el-input__inner');
                            //input.removeAttribute('readonly');
                        }
                    });
                },
                setCurrent(row) {
                    this.$refs.singleTable.setCurrentRow(row);
                },
                handleCurrentChange(val) {
                    this.currentRow = val;
                },
                JCChange: function (val) {

                },
                JSEChange: function (val) {

                },
                handleClick(tab, event) {
                    console.log(tab, event);
                },
                onSubmit: function () {
                    var pro = this;
                    pro.btload = true;
                    var kcdata = _.find(pro.tkkcs, function (obj) {
                        return obj.id == pro.skkc;
                    })
                   
                    if (!pro.dkyy) {
                        alert("代课原因不能为空！");
                        pro.btload = false;
                        return;
                    }
                    var m_ydkxx = pro.skzc + "," + kcdata.zc + "," + kcdata.jc1 + "," + kcdata.jc2 + "," + kcdata.jse + ", ,";

                    $.getJSON("/api/Bll/ExeAction?Action=TKGL_SQDK&r=" + Math.random(), { "P1": pro.xq, P2: pro.js.value, tklb: pro.tklb, dkyy: pro.dkyy, ytkxx: m_ydkxx, kcdm: kcdata.kcdm, hb: kcdata.hb }, function (r) {
                        if (r.ErrorMsg == "") {
                            pro.$message({
                                type: 'info',
                                message: '提交代课申请成功'
                            })
                            location.href = "UI_SUCCESS.html";
                        }
                    })
                }
            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {

                    var xqs = JSON.parse(localStorage.getItem("xqdata"));
                    for (var i = 0; i < xqs.length; i++) {
                        if (xqs[i].isnow == "Y") {
                            pro.xq = xqs[i].xq;
                        }
                    }
                    $.getJSON("/api/Bll/ExeAction?Action=TKGL_GETTKINIT&r=" + Math.random(), {}, function (r) {
                        if (r.ErrorMsg == "") {
                            pro.skzcs = r.Result1;
                            pro.dqz = r.Result * 1;
                            pro.skzc = r.Result * 1;
                        }
                    })

                })
            },
            watch: {
                'skzc': { //深度监听，可监听到对象、数组的变化
                    handler(newV, oldV) {
                        var pro = this;
                        if (newV) {
                            $.getJSON("/api/Bll/ExeAction?Action=TKGL_GETSKKC&r=" + Math.random(), { "P1": pro.xq, "P2": pro.skzc }, function (r) {
                                if (r.ErrorMsg == "") {
                                    //pro.tkkcs = [{ id: "1", xq: "20-21-1", kcmc: "计算机应用于技术", skz: "1", jc1: "1", jc2: "1", jse: "B301机房", bj: "营销(怀)161" }, { id: "2", xq: "20-21-1", kcmc: "计算机应用于技术", skz: "2", jc1: "3", jc2: "4", jse: "B301机房", bj: "营销(怀)161,营销(怀)163" }];
                                    for (var i = 0; i < r.Result.length; i++) {
                                        r.Result[i]["id"] = (i * 1 + 1) + "";
                                    }
                                    pro.tkkcs = r.Result;
                                }
                            })
                        }
                    },
                    deep: true
                }
               

            }


        })


    </script>
</body>
</html>
